<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basepath = request.getContextPath(); %>
<%String nick = (String)session.getAttribute("user"); %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>蜂流器</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
    <link href="<%=basepath%>/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/templatemo-style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
	   .modalDialog {
		    position: fixed;
		    font-family: Arial, Helvetica, sans-serif;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    background: rgba(0,0,0,0.8);
		    z-index: 99999;
		    opacity:0;
		    -webkit-transition: opacity 400ms ease-in;
		    -moz-transition: opacity 400ms ease-in;
		    transition: opacity 400ms ease-in;
		    pointer-events: none;
		}
       .modalDialog:target {
		    opacity:1;
		    pointer-events: auto;
		}
       .modalDialog > div {
		    width: 400px;
		    position: relative;
		    margin: 10% auto;
		    padding: 5px 20px 13px 20px;
		    border-radius: 10px;
		    background: #fff;
		    background: -moz-linear-gradient(#fff, #999);
		    background: -webkit-linear-gradient(#fff, #999);
		    background: -o-linear-gradient(#fff, #999);
		}
       .close {
		    background: #606061;
		    color: #FFFFFF;
		    line-height: 25px;
		    position: absolute;
		    right: -12px;
		    text-align: center;
		    top: -10px;
		    width: 24px;
		    text-decoration: none;
		    font-weight: bold;
		    -webkit-border-radius: 12px;
		    -moz-border-radius: 12px;
		    border-radius: 12px;
		    -moz-box-shadow: 1px 1px 3px #000;
		    -webkit-box-shadow: 1px 1px 3px #000;
		    box-shadow: 1px 1px 3px #000;
		}
       .close:hover { background: #00d9ff; }
    </style>
    <script >
        var nick = '<%=nick%>';
        if(!nick || nick == 'null') location.href = "login.jsp";
    </script>
  </head>
  <body id="totalBody">
    <!-- Left column -->
    <div class="templatemo-flex-row">
      <div class="templatemo-sidebar">
        <header class="templatemo-site-header"> 
          <h1>蜂流器</h1>
        </header>
        <div class="profile-photo-container">
          <center><img src="<%=basepath%>/img/profile-photo.png" alt="Profile Photo" class="img-responsive"> </center>
        	
        </div><br>
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
          </div>
        <nav class="templatemo-left-nav">          
          <ul>
              <li><a href="<%=basepath%>/index.jsp"><i class="fa fa-database fa-fw"></i>数据上传</a></li>
              <%--<li><a href="<%=basepath%>/step1.jsp" class="active"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-1. 选择目标数据库</a></li>--%>
              <%--<li><a href="<%=basepath%>/step2.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-2. 选择开放表与列</a></li>--%>
              <%--<li><a href="<%=basepath%>/step3.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-3. 确认上传</a></li>--%>
          </ul>
        </nav>
      </div>
      <div class="templatemo-content col-1 light-gray-bg" id="contentBox">
      	<!-- navi --> 
        <div class="templatemo-top-nav-container">
          <div class="row">
            <nav class="templatemo-top-nav col-lg-12 col-md-12">
              <ul class="text-uppercase">
                <li><a class="active" onclick="">数据上传</a></li>
              </ul>
            </nav> 
          </div>
        </div>
        <!-- main content -->
        <div class="templatemo-content-container selectConditionTable">
          <div class="templatemo-content-widget no-padding">
              <form accept-charset="UTF-8">
                  <div>
                      <label for="DBType">数据库类型</label>
                      <select style="width:600px" class="form-control" id="DBType" onchange="selectDb()">
                          <option value="0">选择数据类型</option>
                          <%--<option value="1">MYSQL</option>--%>
                          <%--<option value="2">PostgreSQL</option>--%>
                          <%--<option value="3">Oracle</option>--%>
                          <option value="4">个人CSV</option>
                      </select>
                  </div>
                  <div id="dbInputDiv">
                      <div class="form-group" style="margin-top: 15px">
                          <label for="IPAddress">企业名称</label>
                          <input style="width:600px" type="text" class="form-control" id="companyName" placeholder="企业名称(只能英文字母或数字)">
                      </div>
                      <div class="form-group">
                          <label for="IPAddress">主机名或IP地址</label>
                          <input style="width:600px" type="text" class="form-control" id="IPAddress" placeholder="IP地址">
                      </div>
                      <div class="form-group">
                          <label for="portNo">端口（一般MYSQL:3306, Oracle:1521, PostgreSQL:5432）</label>
                          <input style="width:600px" type="text" class="form-control" id="portNo" placeholder="端口号">
                      </div>
                      <div class="form-group">
                          <label for="DBName" id="dbNameLabel">数据库名</label>
                          <input style="width:600px" type="text" class="form-control" id="DBName" placeholder="数据库名">
                      </div>
                      <div class="form-group" id="dbConnectTypeDiv" style="display: none">
                          <label >连接方式</label><br />
                          <label><input name="dbConnectType" type="radio" style="margin-left:20px;display: inline-block" />服务名 </label>
                          <label><input name="dbConnectType" type="radio" style="margin-left:50px;display: inline-block" />SID </label>
                      </div>
                      <div class="form-group">
                          <label >是否回溯</label><br />
                          <label><input name="backTrackable" type="radio" style="margin-left:20px;display: inline-block" />否 </label>
                          <label><input name="backTrackable" type="radio" style="margin-left:50px;display: inline-block" />是 </label>
                      </div>
                      <div class="form-group">
                          <label for="description">任务描述</label><br />
                          <textarea rows="5" style="width:600px" id="description" class="form-control"></textarea>
                      </div>
                      <div class="form-group">
                          <label for="userName">用户名</label>
                          <input style="width:600px" type="text" class="form-control" id="userName" placeholder="用户名">
                      </div>
                      <div class="form-group">
                          <label for="userPwd">密码</label>
                          <input style="width:600px" type="password" class="form-control" id="userPwd" placeholder="数据库连接密码(可为空)">
                      </div>
                      <div>
                          <label for="DBType">任务执行时间</label>
                          <select style="width:600px" class="form-control" id="excuteFreq">
                              <option value="-1">选择执行时间点</option>
                              <option value="0">24点</option>
                              <option value="1">2点</option>
                              <option value="2">4点</option>
                              <option value="3">6点</option>
                          </select>
                      </div>
                  </div>
                  <div id="csvInputDiv" style="display: none">
                      <div class="form-group" style="margin-top: 15px">
                          <label for="csvClassLabelZh">数据集中文名</label>
                          <input style="width:600px" type="text" class="form-control" id="csvClassLabelZh" placeholder="数据集中文名">
                      </div>
                      <div class="form-group">
                          <label for="csvClassLabelEn">数据集英文名(驼峰命名,单词首字母大写)</label>
                          <input style="width:600px" type="text" class="form-control" id="csvClassLabelEn" placeholder="数据集英文名">
                      </div>
                      <div class="form-group" id="csvLabelLangDiv">
                          <label>数据集label语种</label><br />
                          <label><input name="csvLang" type="radio" style="margin-left:20px;display: inline-block" />英文(EN)</label>
                          <label><input name="csvLang" type="radio" style="margin-left:50px;display: inline-block" />中文(ZH)</label>
                      </div>
                      <div class="form-group">
                          <label for="csvHeaderZh">需添加的中文表头(文件中不包含中文表头时,必需输入,以逗号分隔,如:name1,name2,..)</label>
                          <input style="width:600px" type="text" class="form-control" id="csvHeaderZh" placeholder="中文表头">
                      </div>
                      <div class="form-group">
                          <label for="csvHeaderEn">需添加的英文表头(文件中不包含英文表头时,必需输入,以逗号分隔,如:name1,name2,..)</label>
                          <input style="width:600px" type="text" class="form-control" id="csvHeaderEn" placeholder="英文表头">
                      </div>
                      <div>
                          <label for="DBType">文件编码格式</label>
                          <select style="width:600px" class="form-control" id="enCodeSelector">
                              <option value="0">选择编码类型</option>
                              <option value="1">UTF8</option>
                              <option value="2">GBK</option>
                              <option value="3">Unicode</option>
                              <option value="4">UTF-16BE</option>
                              <option value="5">ANSI|ASCII</option>
                          </select>
                      </div>
                      <div class="form-group">
                          <label for="csvFile">csv文件</label>
                          <input style="width:600px" type="file" class="form-control" id="csvFile" placeholder="csv文件">
                      </div>
                  </div>
                  <hr>
                  <button type="button" id="submitBtn" class="btn btn-info center-block" style="margin:0 auto" onclick="submitInfo(this)">链接/下一步</button>
              </form>
          </div>
          <div style="clear:both"></div>
        </div>
       	<footer class="text-right">
          <p>Copyright &copy; 2016 语义信息科技有限公司
          | Designed by <a href="http://www.usources.cn" target="_blank">USources</a></p>
        </footer>     
      </div>
    </div>
    <div>
    </div>
    <!-- JS -->
    <script type="text/javascript" src="<%=basepath%>/js/jquery-2.1.0.min.js"></script>      <!-- jQuery -->
    <script type="text/javascript" src="<%=basepath%>/js/templatemo-script.js"></script>      <!-- Templatemo Script -->
    <script type="text/javascript">
        $("input[name='backTrackable']").eq(0).prop("checked",true);
        $("input[name='dbConnectType']").eq(0).prop("checked",true);
        $("input[name='csvLang']").eq(0).prop("checked",true);
        function selectDb(){
            if($("#DBType").val() == 3){
                $("#dbInputDiv").css("display","");
                $("#csvInputDiv").css("display","none");
                $("#dbNameLabel").html("服务名/SID");
                $("#DBName").val("ORCL");
                $("#dbConnectTypeDiv").css("display","");
                $("#submitBtn").html("链接/下一步");
            }else if($("#DBType").val() == 4){
                $("#dbInputDiv").css("display","none");
                $("#csvInputDiv").css("display","");
                $("#submitBtn").html("开始上传");
            }else{
                $("#dbInputDiv").css("display","");
                $("#csvInputDiv").css("display","none");
                $("#dbNameLabel").html("数据库名");
                $("#DBName").val("");
                $("#dbConnectTypeDiv").css("display","none");
                $("#submitBtn").html("链接/下一步");
            }
        }
        function submitInfo(e){
            if($("#DBType").val() == 4){
                csvUpload(e);
            }else{
                submitDbInfo(e);
            }
        }
        function csvUpload(e){
            $(e).attr("onclick","").html("数据生成中...");
            var csvClassLabelZh = $("#csvClassLabelZh").val(),
                csvClassLabelEn = $("#csvClassLabelEn").val(),
                csvClassLabelEn = $("#csvClassLabelEn").val(),
                csvHeaderEn = $("#csvHeaderEn").val(),
                csvHeaderZh = $("#csvHeaderZh").val(),
                csvLang = !!$("input[name='csvLang']").eq(1).prop("checked"),
                csvFile = $("#csvFile")[0].files[0],
                csvEncode = $("#enCodeSelector").val();
            csvLang = csvLang ? 1 : 0;
            if(!csvClassLabelEn || !csvClassLabelZh){
                alert("请输入完整!");
                $(e).attr("onclick","submitInfo(this)").html("开始上传");
                return;
            }
            if(csvEncode == 0){
                alert("请选择正确编码格式");
                $(e).attr("onclick","submitInfo(this)").html("开始上传");
                return;
            }
            var formData = new FormData();
            formData.append("csvFile",csvFile);
            formData.append("classLabelEn", csvClassLabelEn);
            formData.append("classLabelZh", csvClassLabelZh);
            formData.append("headerEn", csvHeaderEn);
            formData.append("headerZh", csvHeaderZh);
            formData.append("lang", csvLang);
            formData.append("enCode", csvEncode);
            $.ajax({
                url: '<%=basepath%>/csvUpload',
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    $(e).attr("onclick","submitInfo(this)").html("开始上传");
                    if(data == 1){
                        alert("上传成功!!");
                    }else if(data ==0){
                        alert("参数不全,请检查输入项!");
                    }else if(data == 6){
                        alert("您尚未登录!");
                        location.href = "login.jsp";
                    }else{
                        alert("上传失败,请刷新后重试!");
                    }
                },
                error: function (data) {
                    console.log(data);
                    $(e).attr("onclick","submitInfo(this)").html("开始上传");
                    alert("上传失败,请刷新后重试!");
                }
            });
        }
        function submitDbInfo(e){
            $(e).attr("onclick","").html("正在链接...");
            var DBType = $("#DBType").val(),
                    IPAddress = $("#IPAddress").val(),
                    portNo = $("#portNo").val(),
                    DBName = $("#DBName").val(),
                    backTrackable = !!$("input[name='backTrackable']").eq(1).prop("checked"),
                    dbConnectType = !!$("input[name='dbConnectType']").eq(1).prop("checked"),
                    description = $("#description").val(),
                    userName = $("#userName").val(),
                    userPwd = $("#userPwd").val(),
                    companyName = $("#companyName").val(),
                    excuteFreq = $("#excuteFreq").val();
            if(dbConnectType){
                dbConnectType = 1;
            }else{
                dbConnectType = 0;
            }
            if(DBType == 0){
                alert("请选择数据库类型!");
                $(e).attr("onclick","submitInfo(this)").html("链接/下一步");
                return;
            }
            if(excuteFreq == -1) {
                alert("请选择任务执行时间点!");
                $(e).attr("onclick","submitInfo(this)").html("链接/下一步");
                return;
            }
            if(!IPAddress || !portNo || !DBName || !userName || !companyName){
                $(e).attr("onclick","submitInfo(this)").html("链接/下一步");
                alert("请输入完整!");
            }else{
                $.ajax({
                    type: "POST",
                    url: "<%=basepath%>/connectDB",
                    data: {companyName:companyName,dbType:DBType,ipAddress:IPAddress,dbConnectType:dbConnectType,
                        portNo:portNo,dbName:DBName,backTrackable:backTrackable,description:description,
                        userName:userName,userPwd:userPwd,excuteFreq:excuteFreq},
                    success: function(data){
                        $(e).attr("onclick","submitInfo(this)").html("链接/下一步");
                        if(data == '1'){
                            window.location.href="<%=basepath%>/step2.jsp";
                        }else if(data == '3'){
                            alert("数据库连接失败,请检查输入参数!");
                        }else if(data == '10'){
                            alert("暂不支持此数据库连接！");
                        }else{
                            alert("参数异常,请刷新页面后重试!");
                        }
                    },
                    error: function (error) {
                        console.log(error);
                        $(e).attr("onclick","submitInfo(this)").html("链接/下一步");
                        alert("网络异常,请稍后重试!");
                    }
                });
            }
        }
        (function checkLogin(){
            $("#dbInputDiv").css("display","none");
            $("#csvInputDiv").css("display","");
            $("#submitBtn").html("开始上传");
        })()
    </script>
  </body>
</html>